<template>
  <div>
    <a-table :pagination="false" :columns="columns" :data-source="data" class="components-table-demo-nested">
      <template #bodyCell="{ column, record }">
        <!-- 文件类型 -->
        <template v-if="column.dataIndex == 'directoryId'">
          <div>
            <a-tree-select
              :bordered="false"
              v-model:value="record.directoryId"
              :disabled="true"
              :field-names="{ label: 'name', value: 'id', children: 'children' }"
              tree-default-expand-all
              :tree-data="treeDataType"
              tree-node-filter-prop="name"
            >
            </a-tree-select>
          </div>
        </template>

        <!-- 保密等级 -->
        <template v-if="column.dataIndex == 'securityLevel'">
          <div>
            <a-cascader :bordered="false" :disabled="true" v-model:value="record.securityLevel" :options="LevelOptions" style="width: 80px" />
          </div>
        </template>

        <!-- 是否现场文件 -->
        <template v-if="column.dataIndex == 'isLocale'">
          <div>
            <a-cascader :bordered="false" :disabled="true" v-model:value="record.isLocale" :options="templateOptions" style="width: 80px" />
          </div>
        </template>

        <!-- 是否文件模板 -->
        <template v-if="column.dataIndex == 'isTemplate'">
          <div>
            <a-cascader :bordered="false" :disabled="true" v-model:value="record.isTemplate" :options="templateOptions" style="width: 80px" />
          </div>
        </template>

        <!-- 文件负责人 -->
        <template v-if="column.dataIndex == 'principalId'">
          <div>
            <a-cascader
              :bordered="false"
              :disabled="true"
              v-model:value="record.principalId"
              :options="subjectOptions"
              :field-names="{
                label: 'nickName',
                value: 'id'
              }"
              :matchInputWidth="true"
            />
          </div>
        </template>

        <!-- 文件会签人 -->
        <!-- <template v-if="column.dataIndex == 'counterSignIds'">
          <div>
            <a-cascader
              :bordered="false"
              :disabled="true"
              v-model:value="record.counterSignIds"
              :options="subjectOptions"
              multiple
              :field-names="{
                label: 'nickName',
                value: 'id'
              }"
              :matchInputWidth="true"
            />
          </div>
        </template> -->

        <!-- 操作项 -->
        <template v-else-if="column.key === 'operation'">
          <span class="form-table-actions" @click="handlePreview(record)">预览</span>
        </template>
      </template>
      <!-- 必填选项 -->
      <template #headerCell="{ column }">
        <template v-if="column.key === 'securityLevel'"
          ><span class="form-table-heard">保密等级 </span>
          <a-tooltip placement="top" :overlayStyle="{ maxWidth: '655px' }">
            <template #title>
              <p>
                <span>1、绝密：指一旦泄密会使国家遭受严重危害和重大损失的。特指某些秘密文件资料，比如设计图纸、</span>
              </p>
              <p>
                <span>投标方案、电子帐本、程序源码、个人隐私以及一些包含重要信息的录像带和光盘等文件。</span>
              </p>
              <p>
                <span>2、机密：指标有“机密”密级的文件、简报等形式含有国家重要秘密、泄露会使国家的安全和利益</span>
              </p>
              <p>
                <span>遭受严重的损害的载体。有文件、简报、讲话材料，各种资料、报表、刊物，以文字、符号、图形、</span>
              </p>
              <p>
                <span>声、像等形式。</span>
              </p>
              <p>
                <span>3、秘密：可以称为私有文件，或者是因为某些原因，而不可以向大众公开的文件，如国家机密文件等。</span>
              </p>
              <p>
                <span>4、公开：没有什么影响，可以公开的。</span>
              </p>
            </template>
            <span class="promptIcon"><question-circle-outlined /></span>
          </a-tooltip>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import type { CascaderProps } from 'ant-design-vue';
import { ref } from 'vue';
import { fileTree } from '@/config/api/publicFile';
import { fileGet } from '@/config/api/documentValidation';
import { treeDataSubject } from '@/config/api/documentApplication';
import { getPreviewFileUrl } from '@/config/api/resourceFileInfo';
import { useRoute } from 'vue-router';

// 初始化赋值
const route: any = useRoute();
const data: any = ref([]);
getViewData();
function getViewData() {
  Promise.all([
    fileGet(route.query.id),
    fileTree({
      name: ''
    }),
    treeDataSubject({
      parentId: 0
    })
  ]).then(([fileGetRes, fileTreeRes, treeDataSubjectRes]) => {
    const result = fileGetRes.data?.applyList;
    if (result) {
      result.isLocale = [result.isLocale];
      result.principalId = [result.principalId];
      // result.counterSignIds = [];
      // result.countersignResps.forEach((item) => {
      //   result.counterSignIds.push([item.countersignId]);
      // });
      data.value = result?.[0] ? result : [result];
    }
    getFileTree(fileTreeRes);
    getSubjectTree(treeDataSubjectRes);
  });
}
// 文件类型树状
const treeDataType = ref([]);
function getFileTree(result) {
  if (result.success) {
    treeDataType.value = result.data;
  }
}

// 保密等级下拉
const LevelOptions: CascaderProps['options'] = [
  {
    label: '公开',
    value: 4
  },
  {
    label: '机密',
    value: 2
  },
  {
    label: '绝密',
    value: 1
  },
  {
    label: '秘密',
    value: 3
  }
];

// 是否文件模板
const templateOptions: CascaderProps['options'] = [
  {
    label: '是',
    value: 1
  },
  {
    label: '否',
    value: 0
  }
];

// 文件负责人和文件会签人下拉
const subjectOptions = ref<CascaderProps['options']>([]);
function getSubjectTree(result) {
  if (result.success) {
    subjectOptions.value = result.data;
  }
}
// function filter(list: any) {
//   list.forEach((item) => {
//     const { subjectSimpleList, childOrg } = item;
//     if (subjectSimpleList?.length > 0) {
//       item.childOrg = [...childOrg, ...subjectSimpleList.map(({ id, nickName }) => ({ id, name: nickName }))];
//     }
//   });
//   return list;
// }

// 预览
function handlePreview(record) {
  const params = {
    id: record.newVersionId,
    expires: 2,
    timeUnit: 'HOURS'
  };
  getPreviewFileUrl(params).then((result) => {
    if (result && result.success) {
      window.open(result.data);
    }
  });
}

const columns = [
  { title: '文件名称', dataIndex: 'name', key: 'name', width: 150 },
  { title: '文件编码', dataIndex: 'code', key: 'code', width: 150 },
  { title: '文件目录', dataIndex: 'directoryId', key: 'directoryId', width: 150 },
  { title: '版本号', dataIndex: 'version', key: 'version', width: 100 },
  { title: '保密等级', dataIndex: 'securityLevel', key: 'securityLevel', width: 150 },
  { title: '是否文件模板', dataIndex: 'isTemplate', key: 'isTemplate', width: 120 },
  { title: '文件负责人', dataIndex: 'principalId', key: 'principalId', width: 100 },
  // { title: '文件会签人', dataIndex: 'counterSignIds', key: 'counterSignIds', width: 100 },
  { title: '主要内容', dataIndex: 'mainContent', key: 'mainContent', width: 150 },
  { title: '申请原因', dataIndex: 'applyReason', key: 'applyReason', width: 150 },
  { title: '操作', key: 'operation', width: 200, fixed: 'right' }
];
</script>
<style lang="less" scoped>
.form-table-actions {
  color: #005aea;
  cursor: pointer;
  margin-right: 10px;
}
.promptIcon {
  cursor: pointer;
  color: #005aea;
}
/deep/ .ant-select-selection-item {
  color: #000 !important;
}
/deep/ .ant-select-arrow {
  display: none;
}
/deep/ .ant-select-selection-item {
  border-color: #fff !important;
}
/deep/ .ant-table-thead > tr > th {
  font-weight: 700;
  background-color: #e5eefd;
}
</style>
